<template>
    <div class="footer">
      <!--
      <div class="footer-left">
          <img id="footer-img" src="@/assets/img/logo.png" alt="">
      </div>
      -->
      <div class="footer-right">
          <div class="footer-right1">
              <h2>功能/Function</h2>
              <ul>
                  <li><a href="/meteorology">气象/meteorogram</a></li>
                  <li><a href="/discover">监测/monitor</a></li>
                  <li><a href="/weather">天气/weather</a></li>
                  <li><a href="/heat">反演/invasion</a></li>
              </ul>
          </div>

          <div class="footer-right2">
              <h2>帮助/Help</h2>
              <ul>
                  <li><a href="/help">问题/question</a></li>
                  <li><a href="/help">联系/contact</a></li>
              </ul>
          </div>
          <div class="footer-right3">
              <h2>账号/Account</h2>
              <ul>
                  <li><a href="/user/login">登录/login</a></li>
                  <li><a href="/user/register?wantRegister=true">注册/register</a></li>
              </ul>
          </div>
          <div class="footer-right4">
              <h2>更多/More</h2>
              <ul>
                  <li><a href="#">介绍/Introduction</a></li>
                  <li><a href="#">关于/About</a></li>
              </ul>
          </div>
      </div>
  </div>
</template>

<style scoped>
    ul,li{
        margin:0px;
        padding:0px;
        list-style:none;
        text-decoration:none;
    }
    .footer{
        position:absolute;
        padding:0;
        margin:0;
        width:100%;
        height:250px;
        background:#FFFFFF;/*F4F4F4*/
        border-top:solid #E0E0E0 1px;
    }
    .footer-left{
        position:absolute;
        width:20%;
        height:100%;
        padding:0;
        margin:0;
        /*border:solid blue 1px;*/
    }
    #footer-img{
        width:100%;
        padding:0;
        margin:0;
        object-fit: contain; /* 等比例缩放 */
        /*height:248px;*/
    }
    .footer-right{
        /*position:absolute;
        left:20%;
        width:80%;*/
        width:100%;
        height:100%;
        padding:0;
        margin:0;
        display:flex;/**/
        text-align:center;
        /*border:solid blue 1px;*/
    }
    .footer-right>div>ul>li>a{
         font-size:18px;
         color:black;
    }
    .footer-right>div>ul>li>a:hover {
         color:blue;
    }
    .footer-right1{
        flex-grow:1;
        /*border:solid red 1px;*/
    }
    .footer-right1>ul>li{
        margin-bottom:20px;
    }
    .footer-right2{
        flex-grow:1;
        /*border:solid red 1px;*/
    }
    .footer-right2>ul>li{
        margin-bottom:20px;
    }
    .footer-right3{
        flex-grow:1;
        /*border:solid red 1px;*/
    }
    .footer-right3>ul>li{
        margin-bottom:20px;
    }
    .footer-right4{
        flex-grow:1;
        /*border:solid red 1px;*/
    }
    .footer-right4>ul>li{
        margin-bottom:20px;
    }
</style>